<template>
  <div class="flex">
    <div class="">{{title}}：</div>
    <div class="flex flex-1">
      <div class="img_record_item " v-for="(item,index) in imgList" :key="index">
        <div @click="showFile(judgeFileExtension(item.name).type, item, index)" v-ripple class="file_item relative-position">
          <div class="flex">
              <span class="text-ellipsis" style="width: 100px; display: inline-block;line-height: 40px;margin-left: 3px">
                                    {{ item.name }}
                        <q-tooltip>{{ item.name }}</q-tooltip>
              </span>
          </div>
        </div>
    </div>
    </div>
    <look-img ref="lookImg" />
    <!--查看pdf-->
    <look-pdf ref="LookPdf" />
  </div>
</template>
<script>
import LookImg from 'src/components/look-img/index'
import lookPdf from 'src/components/look-pdf'
import _ from 'lodash'
export default {
  name: 'img-record',
  props: {
    title: String,
    imgList: Array
  },
  components: {
    LookImg,
    lookPdf
  },
  computed: {
    // 如果不含有pdf 格式 则显示轮播图效果
    isHasPdf () {
      const member = this.imgList.map(v => this.judgeFileExtension(v.name))
      return member.some(j => j.type === 'pdf')
    }
  },
  methods: {
    // showFile (type, item) {
    //   this.$emit('showFile', type, item)
    // },
    // 预览文件
    showFile (type, item, index) {
      if (!this.isHasPdf) {
        const imgList = _.map(this.imgList, 'url')
        this.$refs.lookImg.showDialog(imgList, index)
        return
      }
      if (type === 'pdf') {
        this.$refs.LookPdf.showDialog(item.url)
      } else {
        this.$refs.lookImg.showDialog(item.url)
      }
    },
    // 判断文件后缀
    judgeFileExtension (name) {
      let index = name.lastIndexOf('.')
      let ext = name.substr(index + 1)
      if (ext.toLowerCase() === 'pdf') {
        return {
          icon: 'icontubiao-54',
          color: 'red',
          type: 'pdf'
        }
      } else {
        return {
          icon: 'icontubiao-56',
          color: '#5f77fd',
          type: 'img'
        }
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.img_record_item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width:120px;
  padding: 3px
}
.file_item{
  display flex
  justify-content center
  align-items center
  width 100%
  height 32px
  cursor pointer
  color: #fff;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  background: #F7B82D;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
  border-radius: 6px
}
</style>
